<template>
  <div class="news-item" @click="handleClick">
    <div class="left">
      <div class="title">
        <ze-ellipsis :line="2" :content="newsData.title || ''" />
      </div>
      <div class="info">
        <div>{{ newsData.createTime | timeFormat }}</div>

        <div class="author">
          {{ newsData.createBy }}
        </div>

        <!-- 小程序内无法分享外链，只能打开 webview 后通过右上角分享 -->
        <!-- <div open-type="share" class="share" @click.stop="handleShare">
          <van-icon name="share-o" size="12px" />
          分享
        </div> -->
      </div>
    </div>

    <!-- 资讯封面 -->
    <image class="cover" :src="newsData.coverFile ? newsData.coverFile : defaultIcon" mode="aspectFill" />
  </div>
</template>

<script>
import { formatTimestamp } from '@/utils/format'
import ZeEllipsis from '@/components/ze-ellipsis/index.vue'

export default {
  components: { ZeEllipsis },
  filters: {
    timeFormat(value) {
      return formatTimestamp(value)
    },
  },
  props: {
    newsData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      imageLoaded: false,
      defaultIcon: 'https://oa.zeweb.org.cn/api/admin/sys-file/zeoa/3e8269048b3d45318f8c68cd3074d61b.png',
    }
  },
  methods: {
    handleClick() {
      // const link = encodeURIComponent(`${this.$env.NEWS_HTML}${this.newsData.id}`)
      // uni.navigateTo({
      //   url: `/pages/webview/index?link=${link}`,
      // })
      const datas = encodeURIComponent(JSON.stringify(this.newsData))
      uni.navigateTo({
        url: `/package-guest/pages/index/tabs/home/news-content?newData=${datas}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.news-item {
  display: flex;
  column-gap: 26px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  height: 80px;

  .left {
    box-sizing: border-box;
    height: 100%;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .title {
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    line-height: 20px;
    letter-spacing: 1px;
  }

  .info {
    font-size: 10px;
    font-weight: normal;
    color: #999999;
    line-height: 10px;
    display: flex;
    align-items: center;

    .author {
      margin-left: 40px;
    }

    .share {
      // 增大可交互区域
      padding: 10px;
      margin-left: 30px;
      display: flex;
      align-items: center;
      column-gap: 4px;
    }
  }

  .cover {
    flex: none;
    width: 115px;
    height: 80px;
    border-radius: 5px;
    position: relative;

    // &::after {
    //   content: '';
    //   display: block;
    //   position: absolute;
    //   width: 100%;
    //   height: 100%;
    //   top: 0;
    //   left: 0;
    //   background-image: url('/static/loading.gif');
    //   background-size: cover;
    //   background-position: center;
    //   background-repeat: no-repeat;
    //   opacity: 1;
    // }

    // &.loaded {
    //   &::after {
    //     opacity: 0;
    //   }
    // }
  }
}
</style>
